import 'package:erp/util/image_utils.dart';
import 'package:erp/widgets/load_image.dart';
import 'package:erp/widgets/my_button.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';

import 'controller.dart';

export 'binding.dart';

/// 登陆页面
class Login extends StatelessWidget {
  commonBorder() {
    return OutlineInputBorder(
      borderSide: BorderSide(
        style: BorderStyle.none,
      ),
    );
  }

  /// LOGO
  Widget _buildLogo(BuildContext context) {
    return Container(
      width: 164.w,
      height: 80.h,
      decoration: BoxDecoration(
        image: DecorationImage(
          fit: BoxFit.fitWidth,
          image: ImageUtils.getImageProvider("", holderImg: 'login/logo'),
        ),
      ),
    );
  }

  /// Title
  Widget _buildTitle(BuildContext context) {
    return Container(
      width: 450.w,
      height: 43.h,
      decoration: BoxDecoration(
        image: DecorationImage(
          fit: BoxFit.fitWidth,
          image: ImageUtils.getImageProvider("", holderImg: 'login/title'),
        ),
      ),
    );
  }

  /// Username
  Widget _buildUsernameInput(BuildContext context, LoginController controller) {
    return Obx(
      () => Listener(
        child: TextField(
          maxLines: 1,
          textAlignVertical: TextAlignVertical.center,
          textInputAction: TextInputAction.next,
          focusNode: controller.usernameFocusNode,
          onChanged: (value) => {controller.onUsernameChanged(value)},
          controller: controller.usernameTextEditingController.value,
          textAlign: TextAlign.center,
          style: TextStyle(fontSize: 36.sp, fontWeight: FontWeight.w400, color: Colors.white),
          decoration: InputDecoration(
            floatingLabelBehavior: FloatingLabelBehavior.never,
            isDense: true,
            suffixIconConstraints: BoxConstraints(
              minWidth: 40.w,
              minHeight: 20.h,
            ),
            suffixIcon: GestureDetector(
              child: Container(
                margin: EdgeInsets.only(right: 50.w),
                child: LoadAssetImage(
                  "login/close",
                  width: 40.w,
                  height: 40.w,
                  fit: BoxFit.fitWidth,
                ),
              ),
              onTap: () => {controller.clearUsername()},
            ),
            contentPadding: EdgeInsets.only(left: 100.w, right: 20.w, bottom: 0, top: 0),

            ///
            border: commonBorder(),
            enabledBorder: commonBorder(),
            focusedBorder: commonBorder(),
            errorBorder: commonBorder(),
            disabledBorder: commonBorder(),
            focusedErrorBorder: commonBorder(),
          ),
          keyboardType: TextInputType.text,
        ),
        onPointerDown: (e) => FocusScope.of(context).requestFocus(controller.usernameFocusNode),
      ),
    );
  }

  /// Password
  Widget _buildPasswordInput(BuildContext context, LoginController controller) {
    return Obx(
      () => TextField(
        maxLines: 1,
        textAlignVertical: TextAlignVertical.center,
        textInputAction: TextInputAction.done,
        focusNode: controller.passwordFocusNode,
        onChanged: (value) => {
          controller.onPasswordChanged(value),
        },
        obscureText: !controller.showPassword.value,
        textAlign: TextAlign.center,
        style: TextStyle(fontSize: 36.sp, fontWeight: FontWeight.w400, color: Colors.white),
        decoration: InputDecoration(
          isDense: true,
          floatingLabelBehavior: FloatingLabelBehavior.never,
          suffixIconConstraints: BoxConstraints(
            minWidth: 40.w,
            minHeight: 20.h,
          ),
          suffixIcon: GestureDetector(
            child: Container(
              margin: EdgeInsets.only(right: 50.w),
              child: controller.showPassword.isFalse
                  ? LoadAssetImage(
                      "login/eye_close",
                      width: 40.w,
                      height: 20.w,
                      fit: BoxFit.fitWidth,
                    )
                  : LoadAssetImage(
                      "login/eye_open",
                      width: 40.w,
                      height: 30.w,
                      fit: BoxFit.fitWidth,
                    ),
            ),
            onTap: () => {controller.changeShowPassword()},
          ),
          contentPadding: EdgeInsets.only(left: 100.w, right: 20.w, bottom: 0, top: 0),

          ///
          border: commonBorder(),
          enabledBorder: commonBorder(),
          focusedBorder: commonBorder(),
          errorBorder: commonBorder(),
          disabledBorder: commonBorder(),
          focusedErrorBorder: commonBorder(),
        ),
        keyboardType: TextInputType.text,
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    LoginController controller = Get.find<LoginController>();
    return Container(
      decoration: BoxDecoration(
        image: DecorationImage(
          fit: BoxFit.cover,
          image: ImageUtils.getImageProvider("", holderImg: 'login/background'),
        ),
      ),
      child: GestureDetector(
        behavior: HitTestBehavior.translucent,
        onTap: () => {
          FocusScope.of(Get.context!).requestFocus(new FocusNode()),
        },
        child: Scaffold(
          resizeToAvoidBottomInset: false,
          backgroundColor: Colors.transparent,
          body: Stack(
            alignment: AlignmentDirectional.center,
            children: <Widget>[
              Positioned(
                top: 200.h,
                child: _buildLogo(context),
              ),
              Positioned(
                top: 300.h,
                child: _buildTitle(context),
              ),

              /// 姓名/工号
              Positioned(
                top: 420.h,
                left: 124.w,
                child:
                    Text("姓名/工号", style: TextStyle(color: Colors.white, fontSize: 28.sp, fontWeight: FontWeight.w400)),
              ),

              /// 输入框
              Positioned(
                top: 443.h,
                child: Container(
                  alignment: AlignmentDirectional.center,
                  constraints: BoxConstraints(maxHeight: 87.h, maxWidth: 610.w),
                  decoration: BoxDecoration(
                    image: DecorationImage(
                      image: ImageUtils.getAssetImage("login/username_border"),
                      fit: BoxFit.fitWidth,
                    ),
                  ),
                  child: _buildUsernameInput(context, controller),
                ),
              ),

              /// 密码
              Positioned(
                top: 540.h,
                left: 157.w,
                child: Text("密码", style: TextStyle(color: Colors.white, fontSize: 28.sp, fontWeight: FontWeight.w400)),
              ),

              /// 输入框
              Positioned(
                top: 562.h,
                child: Container(
                  alignment: AlignmentDirectional.center,
                  constraints: BoxConstraints(maxHeight: 87.h, maxWidth: 610.w),
                  decoration: BoxDecoration(
                    image: DecorationImage(
                      image: ImageUtils.getAssetImage("login/password_border"),
                      fit: BoxFit.fitWidth,
                    ),
                  ),
                  child: _buildPasswordInput(context, controller),
                ),
              ),

              Positioned(
                top: 678.h,
                right: 74.w,
                child: Text(
                  "如有问题请联系管理员",
                  textAlign: TextAlign.right,
                  style: TextStyle(color: Colors.white, fontSize: 24.sp, fontWeight: FontWeight.w400),
                ),
              ),
              Positioned(
                top: 755.h,
                right: 169.w,
                child: MyButton(
                  fontSize: 36.sp,
                  onPressed: () => controller.submit(),
                  text: "登录",
                  textColor: Color(0xFF4C88FF),
                  backgroundColor: Colors.white,
                  minWidth: 412.w,
                  minHeight: 84.h,
                  radius: 42.r,
                ),
              ),
              Positioned(
                bottom: 140.h,
                child: Text(
                  "长江慧控科技集团",
                  style: TextStyle(color: Colors.white, fontSize: 24.sp, fontWeight: FontWeight.w400),
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}
